<template>
  <!-- 页头 -->
  <van-nav-bar title="领取结果" class="nav-var-header" left-arrow fixed @click-left="() => {router.go(-1)}"/>
  <div class="act-result-con">
    <div class="act-result-header">
      <van-image :class="stateInfoData.imageWidth" :src="stateInfoData.img"/>
      <p class="title">{{ stateInfoData.state_desc }}</p>
      <!--      <div>{{userInfo.countDownTime}}</div>-->
      <p class="get-text" v-if="stateInfoData.btnState === 3">*注：如遇延迟未发放，请联系客服：400-8808-248</p>
    </div>

    <!--  领取电子券  -->
    <div class="electronic-coupons" v-if="orderData.act_type === 2 && orderData.obtain_status === 1">
      <van-image class="image" :src="getDjlqImg"></van-image>
      <p class="text">前往新页面领取电子券</p>
      <div class="electronic-coupons-btn" @click="handleGoUrl(orderData.link)">点击领取</div>
    </div>

    <!--  订单信息  -->
    <div class="info-card">
      <div class="table">
        <div class="table-col">
          <p class="flex-l">商品名称:</p>
          <p class="info" v-if="orderData">{{ orderData.sku_name }}</p>
        </div>
        <div class="table-col">
          <p class="flex-l">领取时间:</p>
          <p class="info" v-if="orderData">{{ orderData.obtain_time }}</p>
        </div>
        <div class="table-col">
          <p class="flex-l">订单号:</p>
          <p class="info" v-if="orderData">{{ orderData.order_no }}</p>
        </div>
      </div>
    </div>

    <!-- 链接+卡密-->
    <div class="card-command"
         v-if="orderData.act_type === 4 || orderData.act_type === 1 && orderData.obtain_status === 1">
      <div class="card-command_header">
        <p v-if="orderData" class="text">{{ orderData.sku_name }}</p>
        <div @click="() => {router.push({path: '/actDetail', query: {sku_id: orderData.sku_id}})}">商品详情
          <van-icon name="arrow"/>
        </div>
      </div>
      <div class="card-command_con">
        <!--        <div class="col">
                  <p>卡号</p>
                  <p class="t" v-if="orderData">{{ orderData.card_no }}</p>
                </div>-->
        <!--        <div class="btn" data-clipboard-text="9999999999999999">点击复制111</div>-->
        <div class="col">
          <p>发券时间：</p>
          <div class="t" v-if="orderData">{{ orderData.notify_time }}</div>
        </div>
        <div class="col copyValue" v-if="orderData" :data-clipboard-text="orderData.card_pwd">
          <p>卡密：</p>
          <div class="t">{{ orderData.card_pwd }} <span class="text_btn">复制</span></div>
        </div>
        <div class="col copyValue" v-if="orderData && orderData.card_no" :data-clipboard-text="orderData.card_no">
          <p>卡号：</p>
          <div class="t">{{ orderData.card_no }}<span class="text_btn">复制</span></div>
        </div>
        <div class="card-command_btn copyValue" @click="handleCopyCardChange(orderData.card_pwd,orderData.link)"
             :data-clipboard-text="orderData.card_pwd">
          <span v-if="orderData.act_type === 4">复制卡密前往兑换</span>
          <span v-if="orderData.act_type === 2">复制链接</span>
          <span v-if="orderData.act_type === 1">复制卡密</span>
        </div>
        <div class="line"></div>
        <p class="card-text mt15" style="color: red" v-if="orderData.act_type === 4"><span>*</span>复制卡密后，将自动跳转到兑换页面
        </p>
        <p class="card-text mt15" style="color: red" v-if="orderData.act_type === 2"><span>*</span>复制链接</p>
        <p class="card-text mt15" style="color: red" v-if="orderData.act_type === 1"><span>*</span>复制卡密</p>
        <p class="card-text mt15"><span>*</span>卡密有效期至：2024/4/30，请在有效期内兑换，过期失效</p>
        <p class="card-text mt15"><span>*</span>电子券卡密已生成，不予退换</p>
      </div>
    </div>

    <van-button v-if="stateInfoData.btnState === 1 && orderData.obtain_status === 0" size="large" color="#F14131"
                class="go-pay"
                @click="handleCallPayment">去支付
    </van-button>
    <van-button v-if="stateInfoData.btnState === 1 && orderData.obtain_status === 0" size="large" type="default"
                class="cancel-order"
                @click="handleCancelOrder">取消订单
    </van-button>
    <van-button size="large" type="default" class="go-order" @click="handleGoList">查看订单列表</van-button>
  </div>
</template>
<script setup>
import getDjlqImg from "@/assets/image/get_djlq.png"

import {useRoute, useRouter} from 'vue-router'
import {inject, onMounted, ref} from "vue";
import {bocCancelOrder, orderInfo, payGetPayParams, paySuccess} from "@/api/index.js";
import {showFailToast, showToast} from "vant";
import useState from "@/store/useState.js";
import useUser from "@/store/user.js";
import ClipboardJS from "clipboard";

const clipboard = new ClipboardJS('.copyValue');
clipboard.on('success', function () {
  showToast('复制成功')
});
clipboard.on('error', function () {
  showToast('复制失败')
})

const userInfo = useUser()
const stateInfo = useState()
const router = useRouter()
const route = useRoute()
const orderNo = ref('')
const orderData = ref({})
const card_no = ref('') //过敏卡号
const card_pwd = ref('') //过敏卡密
const stateInfoData = ref({})
onMounted(() => {
  orderNo.value = route.query.order_no
  // card_no.value = testFile(orderData.value.card_no)
  // card_pwd.value = testFile(orderData.value.card_pwd)
  getOrderInfo();

  let num = 0
  let t = setInterval(() => {
    getOrderInfo();
    num += 1
    if (num >= 2) {
      clearInterval(t)
    }
  }, 2000)
// getOrderInfo()
})

// 请求订单详情接口，获取订单数据
const getOrderInfo = () => {
  orderInfo(orderNo.value).then((res) => {
    if (res.code !== 0) {
      showFailToast(res.msg)
    } else {
      stateInfoData.value = stateInfo.handleState(res.data)
      // console.log(stateInfoData.value,114)
      orderData.value = res.data
      // console.log(orderData.value,116)
      // orderData.value.card_no = testFile(orderData.value.card_no)
      // userInfo.countdown() // 倒计时
    }
  }).catch((error) => {
    showFailToast(error.msg);
  })
}

const testFile = (value) => {
  const start = value.slice(0, 6)
  const end = value.slice(-4)
  return `${start}******${end}`
}
const handleGoList = () => {
  router.replace({path: '/order'})
}

const handleCopy = (value) => {
  navigator.clipboard.writeText(value).then(() => {
    showToast("复制成功")
  })
}

//复制卡密
const handleCopyCardChange = (value, url) => {
  /* navigator.clipboard.writeText(value).then(() => {
     showToast("复制成功")
   })*/
  if (orderData.value.act_type === 4) {
    window.location.href = url;
  }
}

const handleGoUrl = (url) => {
  window.location.href = url;
}

const handleCallPayment = () => {
  payGetPayParams({order_no: orderNo.value})
      .then((res) => {
        if (res.code == 0) {
          const pay_params = res.data
          if (typeof WeixinJSBridge === "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
            }
          } else {
            onBridgeReady(pay_params);
          }
        } else {
          showToast('微信支付调起失败！');
        }
      }).catch((err) => {
    showFailToast(err.msg);

  })
}

const onBridgeReady = (params) => {
  WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
        "appId": params.appId,  //公众号名称，由商户传入
        "timeStamp": params.timeStamp, //支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        "nonceStr": params.nonceStr,  //支付签名随机串，不长于 32 位
        "package": params.package,//统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        "signType": params.signType,  //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        "paySign": params.paySign, //支付签名
      },
      function (res) {
        if (res.err_msg === "get_brand_wcpay_request:ok") {
          showToast('支付成功！');
          paySuccess({order_no: orderNo.value});
          window.location.reload()
          // router.push({path: '/actResult', query: {order_no: orderNo.value}})
        } else {
          window.location.reload()
          // router.push({path: '/actResult', query: {order_no: orderNo.value}})
        }
      });
}


const reload = inject("reload")
const handleCancelOrder = () => {
  bocCancelOrder({order_no: route.query.order_no})
      .then((res) => {
        if (res.code !== 0) {
          showToast(res.msg)
        } else {
          showToast(res.msg)
          reload()
          getOrderInfo();
        }
      })
}
</script>

<style lang="scss" scoped>
.act-result-con {
  position: relative;
  width: 100%;
  margin-top: 100px;
  padding: 100px 35px;
  box-sizing: border-box;
  background-color: #F6F6F6;

  .act-result-header {
    padding: 80px 0 56px;
    width: 100%;

    .get_ing {
      margin: 0 auto;
      width: 309px;
      height: 251px;
    }

    .get_success {
      margin: 0 auto;
      width: 309px;
      height: 251px;
    }

    .get_waiting {
      margin: 0 auto;
      width: 199px;
      height: 176px;
    }

    .get_fail {
      margin: 0 auto;
      width: 306px;
      height: 251px;
    }

    .get-time {
      font-size: 30px;
      color: #f04231;
      text-align: center;
    }

    .get-text {
      margin-top: 10px;
      font-size: 24px;
      color: #f04231;
      font-weight: 500;
      text-align: center;
      word-break: break-word;
      word-wrap: break-word;
    }

    .title {
      margin-top: 10px;
      font-size: 38px;
      color: #000000;
      font-weight: bold;
      text-align: center;
      word-break: break-word;
      word-wrap: break-word;
    }
  }

  .go-pay {
    margin: 30px auto 0;
    width: 100%;
    height: 94px;
  }

  .cancel-order {
    margin: 30px auto 0;
    --van-button-default-border-color: #999;
  }

  .go-order {
    margin: 30px auto 0;
    --van-button-default-color: #F14131;
    --van-button-default-border-color: #F14131;
  }

}

.electronic-coupons {
  margin: 20px 0;
  padding: 20px 36px 50px;
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-sizing: border-box;

  .image {
    margin: 0 auto;
    width: 315px;
    height: 252px;
  }

  .text {
    margin: 0 0 30px;
    font-size: 38px;
    color: #333333;
    font-weight: bold;
    text-align: center;
  }

  .electronic-coupons-btn {
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 10px;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    background: #f04231;
  }
}

.info-card {
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
  width: 680px;
  min-height: 288px;
  background-color: #fff;
  border-radius: 20px;
  box-sizing: border-box;

  .table {
    width: 100%;
    font-size: 28px;
    letter-spacing: .1em;
    color: #666666;
    font-weight: 500;

    .table-col {
      padding: 15px 0;
      display: flex;
      align-items: flex-start;
      line-height: 1.5em;
      justify-content: space-between;

      .flex-l {
        text-align: left;
        flex: 0 0 140px;
      }

      .info {
        letter-spacing: 0;
        color: #333333;
        word-break: break-word;
        word-wrap: break-word;
      }
    }
  }
}

.card-command {
  margin: 20px auto 0;
  width: 680px;
  height: auto;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;

  .card-command_header {
    padding: 0 20px;
    height: 100px;
    display: flex;
    color: #ff611e;
    font-size: 28px;
    letter-spacing: .1em;
    font-weight: 500;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to left, #fffffe, #ffdbcb);
    box-sizing: border-box;

    .text {
      color: #666666;
    }
  }

  .card-command_con {
    padding: 0 20px 40px;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    overflow: hidden;

    .col {
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28px;
      color: #666666;
      /*让长段文本不换行*/
      white-space: nowrap;
      /*设置文本超出元素宽度部分隐藏*/
      overflow-x: hidden;
      /*设置文本超出部分用省略号显示*/
      text-overflow: ellipsis;

      .t {
        color: #000000;

        .text_btn {
          padding: 0 10px;
          color: #ff611e;
          line-height: 1.6em;
          font-weight: 600;
        }
      }
    }

    .card-command_btn {
      margin: 10px 10px 30px;
      height: 76px;
      line-height: 76px;
      font-size: 26px;
      color: #ffffff;
      font-weight: 500;
      border-radius: 16px;
      background: linear-gradient(to left, #ff611e, #ff611e);
    }

    .line {
      border: 2px dashed #e7e7e7;
    }

    .card-text {
      font-size: 24px;
      font-weight: 500;
      color: #8a8a8a;
      text-align: left;
      word-break: break-word;
      word-wrap: break-word;

      span {
        color: red;
      }
    }
  }
}
</style>
